<template>
<el-container>
  <el-header>
     <el-row :gutter="20"  style="display: flex;width:100%">
        <el-col :span="4" style="display: flex;">
            <div class="grid-content bg-purple" style="display: flex;align-items: center;justify-content: flex-end;">
                <img src="../assets/logo.png" style="width:100%;height:auto;">
            </div>
        </el-col>
        <el-col :span="8">
            <div class="grid-content bg-purple logo" style="font-size:25px">
               <!-- WN综合管理系统 -->
            </div>
        </el-col>
        <el-col :span="12" style="display: flex;justify-content: flex-end; align-items: center;">
            <div class="grid-content bg-purple">
                <el-row :gutter="20" style="display: flex;justify-content: flex-end;">
                    <el-col :span="20" style="display: flex;justify-content: flex-end;">
                        <div class="grid-content bg-purple register">
                            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                             <el-button type="text" v-on:click="signOut" >退出</el-button>
                        </div>
                    </el-col>               
                </el-row>
            </div>
        </el-col>
    </el-row>  

  </el-header>
  <el-container>
    <el-aside width="200px">
        <el-row class="tac">
            <el-col :span="24">
                <el-menu
                :router="true"
                class="el-menu-vertical-demo"
                unique-opened
                @open="handleOpen"
                @close="handleClose"
                :default-active="$router.path"
                >
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-reading"></i>
                    <span slot="title">cesium</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/index/cesium">创建cesium</el-menu-item>
                    <el-menu-item index="/index/cesiumdraw">绘制工具</el-menu-item>
                    <el-menu-item index="/index/loadbasemap">加载底图</el-menu-item>
                    <el-menu-item index="1-2">待定...</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-coin"></i>
                    <span slot="title">mapbox</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/index/mapboxdrew">图层绘制</el-menu-item>
                    <el-menu-item index="/index/mapboxmeasure">图层测量</el-menu-item>
                    <el-menu-item index="/index/mapgeojson">加载geojson</el-menu-item>
				            <el-menu-item index="/index/mapboxClustered">postgis点聚合成簇</el-menu-item>
                    <el-menu-item index="/index/postgisTrendsSection">动态分段</el-menu-item>
                    <el-menu-item index="/index/postgisDensityAnalysis">postgis密度分析</el-menu-item>
                    <el-menu-item index="/index/postgisAbstractAnalysis">postgis叠加分析</el-menu-item>
                    <el-menu-item index="/index/postgisInterpolationAnalysis">postgis插值分析</el-menu-item>
                    <el-menu-item index="/index/postgisBufferAnalysis">postgis缓冲区分析</el-menu-item>
                    <el-menu-item index="/index/postgisPolymerzation">postgis点聚合分析</el-menu-item>
                    <el-menu-item index="/index/postgisNearAnalysis">postgis邻近分析</el-menu-item>
                    <el-menu-item index="/index/postgisSpaceRelation">postgis空间关系分析</el-menu-item>
                    <el-menu-item index="/index/surfaceAnalysis">表面分析</el-menu-item>
                    <el-menu-item index="/index/postgisTysonPolygon">postgis泰森多边形</el-menu-item>
                    <el-menu-item index="/index/postgisOutline">获取图层轮廓</el-menu-item>
                    <el-menu-item index="/index/mapboxpbf">加载pbf</el-menu-item>
                    <el-menu-item index="/index/mapboxclustering">创建样式聚类</el-menu-item>
                    <el-menu-item index="2-1">待定...</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>               
                <el-menu-item index="/index/tag">
                    <i class="el-icon-set-up"></i>
                    <span slot="title">个人中心</span>
                </el-menu-item>
                <el-menu-item index="/index/comment">
                    <i class="el-icon-chat-square"></i>
                    <span slot="title">更多</span>
                </el-menu-item>
                </el-menu>
            </el-col>
        </el-row>
    </el-aside>
    <el-container>
      <el-main>
           <router-view></router-view>
      </el-main>
      <el-footer>
          <span>个人综合平台</span>
      </el-footer>
    </el-container>
  </el-container>
</el-container>
    
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'IndexView',
  // components: {
  //   HelloWorld
  // }
  data(){
    return{
    }
  },
  methods: {
    signOut:function(){
        this.$router.push({path:'/login'})
    },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
        console.log(key, keyPath);
    }
  }
}
</script>

<style scoped lang="scss">
html,body,#homeBox,#app{
  height:100%;
  overflow: hidden;
}
#homeBox{
  /* border:1px solid red; */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #D3DCE6; */
}
.el-container{
  height:100%;
  /* border: 1px solid #B3C0D1; */
}
.el-row{
  width:100%;
}
.el-header {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 60px;
  border-bottom:1px solid #EBEEF5;
  display: flex;
}
.el-aside{
  border-right: solid 1px #EBEEF5;
  /* border-top:solid 1px #EBEEF5; */
}
.el-main{
  background-color: #fff;
  color: #333;
  /* text-align: center; */
  /* line-height: 160px; */
  padding:0px;
  overflow: hidden;
}
.el-footer {
  background-color: #fff;
  font-size: 12px;
  color: #EBEEF5;
  display: flex;
  align-items: flex-end;
  height: 30px;
  line-height: 30px;
}
.el-menu{
  border:0px solid #EBEEF5;
}
.logo{
  display: flex;
  justify-content: flex-end;
}
.register{
  display: flex;
  justify-content: flex-end;
}

</style>
